<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>充值记录</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-button size="small" @click="exportExcel">导出Excel</el-button>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="userName" placeholder="请输入用户昵称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="phone" placeholder="请输入用户手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model="money" placeholder="请输入充值金额"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="status" placeholder="请选择充值状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker size="small" v-model="startTime" type="date" placeholder="年/月/日 充值时间"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" ref="multipleTable" :data="ChongzhiData" element-loading-text="拼命加载中" v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号" width="50px"></el-table-column>
            <el-table-column align="center" sortable prop="userName" label="用户昵称"></el-table-column>
            <el-table-column align="center" sortable prop="money" label="充值金额"></el-table-column>
            <el-table-column align="center" sortable prop="balance" label="账户余额">
                <template slot-scope="scope">
                    <div>{{ scope.row.balance / 100 }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="status" label="充值状态" :formatter="Zhuangtai"></el-table-column>
            <el-table-column align="center" sortable prop="phone" label="联系电话"></el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="充值时间">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
import {
    getBalanceList
} from "../../api/userMG";
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            loading: false,
            ChongzhiData: [],
            status: '',
            money: '',
            userName: '',
            phone: '',
            startTime: '',
            endTime: '',
            timestamp: '',
            options: [{
                value: 0,
                label: '待支付'
            }, {
                value: 1,
                label: '成功'
            }, {
                value: 2,
                label: '失败'
            }],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
        }
    },
    created() {
        this.getdata(1);
    },
    // 注册组件
    components: {
        Pagination
    },
    methods: {
        exportExcel() {
            var parameter = {
                page: -2,
                status: this.status,
                money: this.money,
                userName: this.userName,
                phone: this.phone,
                startTime: this.timestamp,
                endTime: this.endTime
            };
            getBalanceList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.ChongzhiData = res.data.list;
                    return;
                }
            })
            setTimeout(() => {
                //转换成excel时，使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed-right");
                let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
                if (fix) {
                    wb = XLSX.utils.table_to_book(
                        this.$refs.multipleTable.$el.removeChild(fix), xlsxParam
                    );
                    this.$refs.multipleTable.$el.appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(this.$refs.multipleTable.$el, xlsxParam);
                }
                var wbout = XLSX.write(wb, {
                    bookType: "xls",
                    bookSST: true,
                    type: "array",
                });
                try {
                    // 如果是IE浏览器，使用Blob通过navigator.msSaveBlob保存
                    if (navigator.msSaveBlob) {
                        navigator.msSaveBlob(new Blob([wbout], { type: 'application/octet-stream' }), '充值记录列表.xlsx');
                    } else {
                        // 在其他浏览器中使用file-saver保存文件
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '充值记录列表.xlsx');
                    }
                } catch (e) {
                    if (typeof console !== 'undefined') console.log(e, wbout);
                }
                return wbout;
            }, 1000);
            setTimeout(() => {
                this.getdata(1)
            }, 2000);
        },
        // 搜索数据
        search() {
            if (this.startTime != '') {
                this.timestamp = Math.floor(new Date(this.startTime).getTime() / 1000)
            }
            this.getdata(1)
        },
        // 重置数据
        chongzhi() {
            this.status = '',
                this.money = '',
                this.userName = '',
                this.phone = '',
                this.startTime = '',
                this.endTime = '',
                this.timestamp = ''
            this.getdata(1)
        },
        // 积分
        Zhuangtai: function (row) {
            if (row.status == 0) {
                return "待支付"
            } else if (row.status == 1) {
                return "成功"
            } else if (row.status == 2) {
                return "失败"
            }
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        // 获取数据
        getdata(page) {
            this.loading = true;
            var parameter = {
                page: (page - 1) * 20,
                status: this.status,
                money: this.money,
                userName: this.userName,
                phone: this.phone,
                startTime: this.timestamp,
                endTime: this.endTime
            };
            getBalanceList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.ChongzhiData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                }
            })
        },
    }
}
</script>

<style></style>